<template>
  <div class="main">
    <el-form :inline="true" class="bg-bg_color w-[99/100] pl-4 pt-4">
      <el-form-item label="选择名称">
        <el-tree-select v-model="SearchForm.hierarchyname" :data="hierarchydatalist" :props="props" check-strictly
          :render-after-expand="false" clearable filterable class="!w-[220px]" />
      </el-form-item>
      <el-form-item label="文件名称">
        <el-input v-model="SearchForm.filename" clearable filterable class="!w-[220px]" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="GetDataList()">
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <PureTableBar title="上传数据" class="he-70">
      <template #buttons>
        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="HandEdit(undefined)">
          添加
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button class="reset-margin" link type="primary" :icon="useRenderIcon(EditPen)" @click="HandEdit(row)">
              修改
            </el-button>
            <el-button class="reset-margin" link type="danger" :icon="useRenderIcon(Delete)" @click="HandDelete(row)">
              删除
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-dialog @close="CloseData(refform)" v-model="Visible" :title="Visibletitle" width="30%" center
      :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="refform" label-width="120px">
        <el-form-item label="选择层级" prop="parent">
          <el-tree-select v-model="form.parent" :data="hierarchydatalist" :props="props" check-strictly
            :render-after-expand="false" class="!w-[80%]" />
        </el-form-item>
        <el-form-item label="选择文件" prop="file">
          <el-upload v-model:file-list="form.file" :accept="AstrictFileType" action="/api/DataProcess/UploadFile"
            :before-upload="handleBeforeUpload" :on-success="handleSuccessUpload" :limit="1" ref="upload"
            class="!w-[80%]">
            <el-button type="primary" size="small">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                文件最大不可超过100M(注：如需修改文件请先删除当前文件后再上传)
              </div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="文件名称" prop="filename">
          <el-input v-model="form.filename" class="!w-[80%]" />
        </el-form-item>
        <el-form-item label="网站地址" prop="webaddress">
          <el-input v-model="form.webaddress" class="!w-[80%]" />
        </el-form-item>
        <el-form-item label="数据类型" prop="datatype">
          <el-select v-model="form.datatype" class="!w-[80%]">
            <el-option label="分省年度数据" :value="1" />
            <el-option label="企业数据" :value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="AddData(refform)">保存</el-button>
          <el-button @click="CloseData(refform)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import { ref } from "vue";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { usehooks } from "../component/hooks";
const props = {
  label: 'folderName',
  value: "id",
  children: 'child',
}
const {
  form,
  rules,
  upload,
  Visible,
  loading,
  dataList,
  columns,
  refform,
  SearchForm,
  pagination,
  Visibletitle,
  AstrictFileType,
  hierarchydatalist,
  handleCurrentChange,
  handleBeforeUpload,
  handleSuccessUpload,
  GetDataList,
  HandEdit,
  HandDelete,
  AddData,
  CloseData,
  handleSizeChange
} = usehooks('0');
</script>

<style lang="scss" scoped>
:deep(.el-upload__tip) {
  margin-top: 0;
  line-height: 20px;
}

:deep(.el-upload-list__item) {
  margin-bottom: 0;
}

:deep(.el-upload-list) {
  margin: 0;
}

.pure-table {
  height: calc(100% - 60px);
}

:deep(.el-table--fit) {
  height: calc(100% - 60px);
}

:deep(.he-70) {
  height: calc(100% - 60px);
}
</style>
